<template>
  <div id="home">
    <NavBar class="home-nav">
      <div slot="center">购物街</div>
    </NavBar>
    <SearchInput />
    <div class="wrapper">
      <Scroll class="content" ref="scroll">
        <Carsouel :list="banners" />
        <div class="home-item">
          <a
            href="/category"
            class="item"
            v-for="(item, index) in itemList"
            :key="index"
          >
            <img :src="item.image_src" alt="" />
          </a>
        </div>

        <div
          class="floor_group"
          v-for="(item, index) in floorList"
          :key="index"
        >
          <img class="floor_title" :src="item.floor_title.image_src" alt="" />
          <div class="floor_list">
            <a
              v-for="(item2, index) in item.product_list"
              :key="index"
      
            >
              <img :src="item2.image_src" alt=""  />
            </a>
          </div>
        </div>
      </Scroll>
    </div>
  </div>
</template>

<script>
// import debounce from "lodash/debounce";
import { getBannerdata, getnaviList, getfloorList } from "@/api/index";
export default {
  name: "HeimamallIndex",

  data() {
    return {
      banners: [],
      itemList: [],
      floorList: [],
    };
  },

  mounted() {
    getnaviList().then((result) => {
      this.itemList = result.message;
    }),
      getfloorList().then((result) => {
        console.log(result);
        this.floorList = result.message;
      }),
      getBannerdata().then((result) => {
        this.banners = result.message;
      });
  },

  methods: {
 
    // 3.监听scroll滚动到底部
    loadMore() {
      console.log("上啦");
      getfloorList();
    },
  },
  watch: {
    floorList() {
      this.$nextTick(() => {
        this.$refs.scroll.refresh();
        this.$refs.scroll.finishPullUp();
      });
    },
  },
};
</script>

<style lang="less" scoped>
#home {
  /*padding-top: 44px;//100%视口*/
  height: 100vh;
  position: relative;
}
 
.content { 
  position: absolute;
  top: 88px;
  bottom: 49px;
  left: 0;
  right: 0;
  overflow: hidden;
}

.floor_title {
  height: 30px;
}
.home-item {
  display: flex;
  .item {
    flex: 1;

    padding: 10px;
  }
}

.floor_list a {
  float: left;
  width: 33.33%;
  &:nth-child(2),
  &:nth-child(3) {
    border-bottom: 10px solid #fff;
  }
  &:nth-last-child(-n + 4) {
    /* 原图的宽高 232 *386 */
    height: 27.72711207vw;
    border-left: 10px solid #fff;
  }
  /* 后四个超链接 */
  /* 2 3 两个超链接 */
}
//从后面数前四个
</style>
